Feat: Integrate Reown AppKit; replace Web3 Onboard; add wallet priorities and Google socials by vortex-hue · Pull Request #604 · GoodDollar/GoodProtocolUI

vortex-hue · 2025-09-08T12:36:03Z

Description

Summary: Complete migration from Web3 Onboard to Reown AppKit with prioritized wallet support, social login, and MiniPay compatibility.

Issue Fixed: #593 - Integrate with reown appkit

Motivation: The existing Web3 Onboard integration was becoming outdated and lacked the flexibility needed for prioritized wallet display and social authentication. Reown AppKit provides better wallet management, analytics, and modern React patterns that align with current best practices.

Context: This migration enables:

Prioritized wallet display (GoodWallet, Valora) in WalletConnect modal
Google social login integration
Better MiniPay support for mobile users
Modern React hooks and TypeScript support
Improved analytics and monitoring capabilities

How Has This Been Tested?

Local Development Testing:

yarn install - All dependencies installed successfully
yarn build - Project compiles without errors
ESLint checks pass - No linting errors
TypeScript compilation - All type errors resolved

Code Quality:

Removed all legacy @web3-onboard dependencies
Eliminated unused imports and dead code
Fixed TypeScript type mismatches
Resolved ESLint warnings

Checklist:

Prioritized wallet display (GoodWallet, Valora) in WalletConnect modal
Google social login integration
Better MiniPay support for mobile users
Improved analytics and monitoring capabilities
Removed all useActiveWeb3React and useActiveOnboard usages
Replaced with AppKit hooks where applicable
Clean build with no @web3-onboard dependencies

Description by Korbit AI

What change is being made?

Integrate Reown AppKit across the app, replace Web3 Onboard with AppKit-based wallet and network handling, and introduce wallet priorities and Google socials; update multiple components to consume AppKit hooks (account, network, label, etc.), and adjust explorer links and token network handling accordingly.

Why are these changes being made?

Converge to AppKit for consistent wallet/connect flows and network state, replacing the old Onboard integration; this simplifies state management, improves compatibility with new wallet providers, and enables wallet prioritization and Google social login support.

Is this description stale? Ask me to generate a new description by commenting /korbit-generate-pr-description

…ority (GoodWallet, Valora), Google socials, MiniPay labeling; migrate connect flows to AppKit

korbit-ai · 2025-09-08T12:36:08Z

Korbit doesn't automatically review large (3000+ lines changed) pull requests such as this one. If you want me to review anyway, use /korbit-review.

vortex-hue · 2025-09-08T19:47:12Z

Hi @L03TJ3 , can you have a look of my draft pr for this task at your earliest convenience, so I can know if am on the right track and what's remaining for me to do, thanks alot 🙂

…colUI into feat-appkit

L03TJ3 · 2025-10-03T09:39:06Z

package.json

        "@babel/runtime": "^7.18.9",
-        "@gooddollar/good-design": "^0.4.24",
-        "@gooddollar/goodprotocol": "2.0.34-beta.1",
+        "@gooddollar/good-design": "^0.4.21",


should be updated/merged with master to reflect latest changes

L03TJ3 · 2025-10-03T09:49:52Z

src/components/AccountDetails/Transaction.tsx

    return (
        <TransactionWrapper>
-            <TransactionState url={getExplorerLink(chainId, hash, 'transaction')} dataAttr="external_explorer">
+            <TransactionState url={getExplorerLink(+(chainId ?? 1), hash, 'transaction')} dataAttr="external_explorer">


Suggested change

<TransactionState url={getExplorerLink(+(chainId ?? 1), hash, 'transaction')} dataAttr="external_explorer">

<TransactionState url={getExplorerLink(+(chainId ?? 42220), hash, 'transaction')} dataAttr="external_explorer">

We default to celo, not ethereum mainnet

L03TJ3 · 2025-10-03T09:51:24Z

src/components/AccountDetails/index.tsx

-                                            {i18n._(t`Disconnect`)}
-                                        </WalletAction>
-                                    )}
+                                    {(walletInfo?.name || isMiniPay()) &&


is minipay should be variable, outside of render

L03TJ3 · 2025-10-03T10:03:46Z

src/components/AccountDetails/index.tsx

-    //eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()
+
+    const { address } = useAppKitAccount()


create a wrapper hook, something like 'useConnectionInfo' that returns things like wallet-info/chainId/account

replace everywhere we use more then one appkit hook

L03TJ3 · 2025-10-03T10:05:47Z

src/components/BlockNativeOnboard/index.tsx

            text={buttonText}
            web3Action={noop}
-            supportedChains={[SupportedChains.CELO, SupportedChains.MAINNET, SupportedChains.FUSE, SupportedChains.XDC]}
+            supportedChains={[SupportedChains.CELO, SupportedChains.MAINNET, SupportedChains.FUSE]}


One merge with master has incorrect resolved conflicts.
How to resolve conflicts:

master branch changes are almost always leading.

when not sure, don't assume what should be resolution, ask the team please!

XDC is an added/new supported chain, and this should not be removed by your PR

L03TJ3 · 2025-10-03T10:14:29Z

src/components/NetworkModal/index.tsx

-    const { chainId, error, active } = useActiveWeb3React()
+    const { initialized } = useAppKitState()
+    const { chainId } = useAppKitNetwork()
+    // TODO


what is this?

L03TJ3 · 2025-10-03T10:15:17Z

src/components/StyledMenu/SubMenu.tsx

                return (
                    <View style={{ ...styles }}>
-                        <NavLink key={route} to={route} onPress={handleInternal}>
+                        <NavLink key={index} to={route} onPress={handleInternal}>


never use index as key

L03TJ3 · 2025-10-03T10:15:51Z

src/components/WalletModal/index.tsx


-    const { account, error } = useActiveWeb3React()
+    const { address } = useAppKitAccount()
+    // TODO


what is the todo?

L03TJ3 · 2025-10-03T10:24:18Z

src/constants/wallets.ts

@@ -0,0 +1,11 @@
+export const WalletLabels: Readonly<string[]> = [


have the different wallets been tested?
The main ones that should work are: minipay, goodwallet (using wallet-connect), valora.
metamask.

L03TJ3 · 2025-10-03T10:39:28Z

src/pages/gd/Swap/SwapCelo/UniSwap.tsx

-    )
+    }, [address, open])
+
+    const handleError = useCallback(async (e) => {


Can you explain this change?

L03TJ3 · 2025-10-03T10:42:40Z

Also, wallet-connect does not load when I run it from localhost. it works for you?

sourcery-ai

We failed to fetch the diff for pull request #604

You can try again by commenting this pull request with @sourcery-ai review, or contact us for help.

korbit-ai · 2025-10-03T19:36:22Z

Korbit doesn't automatically review large (3000+ lines changed) pull requests such as this one. If you want me to review anyway, use /korbit-review.

… refactor, useConnectionInfo, restore XDC, clean TODOs, fix keys and ESLint warnings

…eError, add wallet QA checklist

…Chat, AccountDetails, Web3ReactManager, Web3Network)

vortex-hue · 2025-10-03T22:29:29Z

Also, wallet-connect does not load when I run it from localhost. it works for you?

works well actually: https://www.loom.com/share/992e55bd5efc410aa76e3702737aad4b?sid=a14f2393-1071-40eb-90a7-1f9268ff41be

Resolved conflicts and API compatibility: - AppBar.tsx: Integrated with new AppKit hooks - NetworkModal/index.tsx: Combined AppKit with activeNetworksByFeature - ClaimBalance.tsx: Updated to use new SDK API - OldClaim.tsx: Kept AppKit connection handling - WalletBalance/index.tsx: Fixed chainId type conversion - All locale files: Accepted master's updated translations - yarn.lock: Regenerated with updated dependencies Note: New SDK version - useG no longer accepts chainId parameter

…into feat-appkit

src/components/AccountDetails/index.tsx

src/components/AppBar.tsx

src/components/Liquidity/RemoveLiquidityReceiveDetails.tsx

src/components/NetworkModal/index.tsx

src/components/WalletBalance/index.tsx

src/components/Withdraw/index.tsx

src/hooks/useConnectionInfo.ts

src/hooks/useWeb3.tsx

src/pages/gd/Claim/Claim.tsx

src/pages/gd/Claim/OldClaim.tsx

L03TJ3 · 2025-11-18T16:08:29Z

@vortex-hue What also needs to be fixed is the 'disconnect' flow when using wallet-connect.
there is from the dapp seemingly no way to disconnect a wallet-connect connected wallet

src/pages/gd/Stake/Savings/index.tsx

L03TJ3 · 2025-12-15T05:24:00Z

src/components/BlockNativeOnboard/index.tsx

@@ -1,36 +1,26 @@
 import React, { FC, useEffect, useRef } from 'react'


If not used, can be removed

L03TJ3 · 2025-12-15T05:49:40Z

src/hooks/useReserveToken.ts

 import { Token } from '@sushiswap/sdk'
 import { ethers } from 'ethers'
 import { useMemo } from 'react'
+import { useAppKitNetwork } from '@reown/appkit/react'


You are missing a merge with master. this is not the expected useReserveToken.
please fix (master is leading)

src/pages/gd/Claim/ClaimBalance.tsx

src/pages/gd/Swap/SwapConfirmModal/index.tsx

src/state/multicall/updater.tsx

L03TJ3

Minipay should not show up as 'wallet to connect'
on the reown modal

src/pages/gd/Swap/SwapConfirmModal/index.tsx

src/reown/minipayConnector.ts

…onnect

pbkompasz and others added 5 commits August 4, 2025 09:45

chore: remove onboard provider

9c50170

feat: add appkit provider

74e45da

chore: replace hooks

ee3abbe

chore: onboard -> appkit

e709dd2

feat(appkit): integrate Reown AppKit; remove Web3 Onboard; wallet pri…

95c730b

…ority (GoodWallet, Valora), Google socials, MiniPay labeling; migrate connect flows to AppKit

vortex-hue changed the title ~~Feat appkit~~ Feat: Integrate Reown AppKit; replace Web3 Onboard; add wallet priorities and Google socials Sep 8, 2025

Merge conflicts resolved and TypeScript errors fixed

e48cd04

vortex-hue added 2 commits September 22, 2025 17:23

fix: yarn lingui and revert back to last commit

d31a141

Merge branch 'feat-appkit' of https://github.com/vortex-hue/GoodProto…

e4a9d54

…colUI into feat-appkit

L03TJ3 requested changes Oct 3, 2025

View reviewed changes

Merge remote-tracking branch 'origin/master' into feat-appkit

125bb80

vortex-hue marked this pull request as ready for review October 3, 2025 19:36

sourcery-ai bot reviewed Oct 3, 2025

View reviewed changes

vortex-hue added 4 commits October 3, 2025 21:08

Address review: CELO default chain helper, explorer defaults, MiniPay…

35c9a1f

… refactor, useConnectionInfo, restore XDC, clean TODOs, fix keys and ESLint warnings

Refactor: useConnectionInfo rollout (partial), clarify SwapCelo handl…

aac96e6

…eError, add wallet QA checklist

refactor(appkit): rollout useConnectionInfo across components (Wallet…

1267495

…Chat, AccountDetails, Web3ReactManager, Web3Network)

fix: complete AppKit integration with security improvements

d1404cd

vortex-hue requested a review from L03TJ3 November 10, 2025 22:02

L03TJ3 and others added 3 commits November 17, 2025 16:07

Merge branch 'master' of https://github.com/GoodDollar/GoodProtocolUI …

e707763

…into feat-appkit

chore: lingui

fef0507

fix: remove walletConnect connector to resolve double modal issue

fea50b2

L03TJ3 requested changes Nov 18, 2025

View reviewed changes

L03TJ3 linked an issue Nov 21, 2025 that may be closed by this pull request

[Feat] Integrate with reown appkit #593

Closed

4 tasks

L03TJ3 temporarily deployed to external December 11, 2025 17:20 — with GitHub Actions Inactive

L03TJ3 deployed to preview December 11, 2025 17:22 — with GitHub Actions View deployment

fix: remove duplicate minipay connector

f151b00

L03TJ3 temporarily deployed to external December 11, 2025 17:23 — with GitHub Actions Inactive

L03TJ3 deployed to preview December 11, 2025 17:24 — with GitHub Actions View deployment

feat: add MiniPay status box and simplify auto-connect

f0e0934

vortex-hue temporarily deployed to external December 12, 2025 12:05 — with GitHub Actions Inactive

vortex-hue deployed to preview December 13, 2025 06:03 — with GitHub Actions View deployment

fix: resolve MiniPay provider fallback in useWeb3 hook

4f460d8

vortex-hue temporarily deployed to external December 13, 2025 19:47 — with GitHub Actions Inactive

vortex-hue deployed to preview December 13, 2025 19:51 — with GitHub Actions View deployment

refactor: remove MiniPay status overlay display

9c93dfe

vortex-hue temporarily deployed to external December 13, 2025 20:35 — with GitHub Actions Inactive

vortex-hue deployed to preview December 15, 2025 05:05 — with GitHub Actions View deployment

L03TJ3 requested changes Dec 15, 2025

View reviewed changes

Apply suggestions from code review

f2a0caa

L03TJ3 had a problem deploying to external December 15, 2025 06:08 — with GitHub Actions Failure

fix: resolve merge conflicts and remove unused code

a152f84

vortex-hue had a problem deploying to external December 15, 2025 07:23 — with GitHub Actions Failure

refactor: remove unnecessary onConnect handler from minipay connector

3411c8e

vortex-hue temporarily deployed to external December 15, 2025 07:28 — with GitHub Actions Inactive

vortex-hue deployed to preview December 15, 2025 08:27 — with GitHub Actions View deployment

L03TJ3 requested changes Dec 16, 2025

View reviewed changes

src/pages/gd/Swap/SwapConfirmModal/index.tsx Outdated Show resolved Hide resolved

src/reown/minipayConnector.ts Outdated Show resolved Hide resolved

Apply suggestions from code review

8fcfe71

L03TJ3 had a problem deploying to external December 16, 2025 15:58 — with GitHub Actions Failure

feat: hide MiniPay from wallet selection UI, enable background auto-c…

9f58702

…onnect

vortex-hue temporarily deployed to external December 16, 2025 16:33 — with GitHub Actions Inactive

vortex-hue deployed to preview December 16, 2025 16:47 — with GitHub Actions View deployment

L03TJ3 approved these changes Dec 16, 2025

View reviewed changes

L03TJ3 merged commit bc9d1ac into GoodDollar:master Dec 16, 2025
4 checks passed

	<TransactionState url={getExplorerLink(+(chainId ?? 1), hash, 'transaction')} dataAttr="external_explorer">
	<TransactionState url={getExplorerLink(+(chainId ?? 42220), hash, 'transaction')} dataAttr="external_explorer">

		@@ -0,0 +1,11 @@
		export const WalletLabels: Readonly<string[]> = [

		@@ -1,36 +1,26 @@
		import React, { FC, useEffect, useRef } from 'react'

Conversation

vortex-hue commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How Has This Been Tested?

Checklist:

Description by Korbit AI

What change is being made?

Why are these changes being made?

Uh oh!

korbit-ai bot commented Sep 8, 2025

Uh oh!

vortex-hue commented Sep 8, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

L03TJ3 commented Oct 3, 2025

Uh oh!

sourcery-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

korbit-ai bot commented Oct 3, 2025

Uh oh!

vortex-hue commented Oct 3, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

L03TJ3 commented Nov 18, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

L03TJ3 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

vortex-hue commented Sep 8, 2025 •

edited

Loading